<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="icon" href="./png/wyytb.png">
    <style>
         *{
            /* height: 0; */
            /* padding: 0; */
            /* margin-top: 0; */
        }
        .A{
            width: 100%;
            height: 80px;
            background-color: rgb(40, 39, 39);
            margin-top: 0px;
            position: relative;
        }
        .A img{
            width: 200px;
            height: 70px;
            margin-left: 100px;
        }
        .A a{
            overflow: hidden;
            text-align: center;
            text-decoration: none;
            color: rgb(197, 193, 193)
        }
        .A a:hover{
            color: black;
        }
        .r{
            height: 0;
            padding: 0;
        }
        .A span{
            margin-left: 300px;
            font-size: 15px;
            margin-top: 2px;
        }
        .A span a{
            margin-left: 40px;
        }
        .A div>a:hover{
            background-color: black;
        }
        .sousuolan{
            margin-left: 700px;
            margin-top: -23px;
        }
        .u{
            text-align: right;
            margin-right: 240px;
            font-size: 14px;
            margin-top: 5px;
        }
        .srch{
            width: auto;
            height: auto;
        }
        .y{
            text-align: right;
            margin-right: 180px;
            font-size: 14px;
        }
        .B{
            width: 100%;
            height: 40px;
            background-color: rgb(153, 32, 32);
            position: relative;
        }
        .B a:hover{
            color: rgb(60, 8, 8);
        }
        .B a{
            margin-left: 50px;
        }
        .j a{
            overflow: hidden;
            text-align: center;
            text-decoration: none;
            float: left;
            margin-left: 100px;
            color: rgb(255, 255, 255)
        }
        .B span{
            margin-left: 295px;
            font-size: 12px;
            margin-top: 5px;
        }
        .B span a{
            margin-left: 67px;
        }
        .B div>a:hover{
            background-color: brown;
        }
        .C{
            width: 100%;
            height: 300px;
            position: relative;
            background-color: saddlebrown;
        }
        .ttt{
            width: 800px;
            height: 300px;
            margin-left: 200px;
            position: relative;
        }
        .qqq{
            width: 250px;
            height: 300px;
            position: relative;
        }
        input{
            width: 150px;
            height: 25px;
            color: rgba(122, 122, 121, 0.334);
        }
    .zhengti{
    background-color: rgb(31, 31, 31);
    color:white ;
    height: 60px;
    line-height: 60px; 
}
.kd a{
    text-decoration: none;
    color: black;
}
.pp{
    margin-left: 150px;
}
.quanbu{
    background-color: rgb(41, 39, 39);
}
.quanbu a{
    text-decoration: none;
    color: aliceblue;
    margin-left: 20px;
}
.ziti{
    margin-left: 350px;
    margin-top: -60px;
}
.sousuolan{
    margin-left: 900px;
    margin-top: -23px;
}
.xiaobiaoqian{
    float: left;
}
.ziti div>a:hover{
    background-color: black;
}
.chuangzuozhe{
    float: left;
    margin-left: 100px;
    margin-top: -20px;
}
.ssq{
    float: left;
    margin-top: 10px;
    margin-left: 5px;
}
.denglu{
    margin-top: -20px;
}
.hongdi{
    text-align: center;
    background-color: brown;
    height: 30px;
    margin-top: -4.5px;
}
.hongdi a{
    margin-right: 45px;
}
.tupia{
    margin-left: 250px;
}
.eee{
    background-color: black;
    float: right;
    margin-top: 20px;
    margin-right: 350px
}
.xxx{
    float: right;
    margin-right: 410px;
    margin-top: -75px;
    background-color: dodgerblue;
    width: 140px;
    height: 40px;
}
.mv{
    margin-left: 670px;
    margin-top: -21px;
    color: rgb(111, 112, 112);
    font-size: 13px;
}    
    .weae{
        width: 800px;
        height: 1752px;
        background-color: aqua;
        margin-left: 200px;
        position: relative;
    }
    .uuuy{
        width: 700px;
        height: 3px;
        background-color: red;
    }
    .kkl{
        float: left;
        margin-top: 20px;
        margin-left: 20px;
    }
    .uuuy{
        float: left;
        margin-top: 30px;
    }
    .tuop img{
        width: 140px;
        height: 140px;
    }
    .rrrr{
        width: 40px;
        height: 40px;
    }
    .kd{
        margin-top: 50px;
        margin-left: 240px;
    }
    .qq{
        margin-top: 420px;
    }
    .wdad img{
        width: 140px;
        height: 140px;
    }
    .new img{
        width: 80px;
        height: 80px;
        margin-top: 30px;
    }
    .wyy img{
        width: 140px;
        height: 140px;
    }
    .wyy{
    width: 670px;
    height: 1000px;
    margin: 10px auto;
    overflow: hidden;
    margin-top: 50px;
}
.er{
    width: 800px;
    float: left;
    margin-left: 300px;
    margin-top: -80px;
}
.er a{
    margin-left: 20px;
}
.bd a:link{
    color: black;
}
.bd a:hover{
    color: black;
}
.bd a:visited{
    color: black;
}
.bd{
    width: 660px;
    height: 30px;
}
.bd a{
    text-decoration: none;
}
.bd1{
    float: left;
}
.bd2{
    float: right;
}
.bd2 div{
    float: right;
}
.jiantou{
    color: red;
}
.bfsc{
    margin-top: 8px;
}
.xian{
    width: 660px;
}
.gequ{
    float: left;
}
.bsb2{
    margin-top: 20px;
    width: 100px;   
    float: left;
}
.biaoshengbang{
    margin-left: 20px;
    height: 40px;
    float: left;
}
.biaoge{
    margin: 10px auto;
    overflow: hidden;
}

.biaotou1{
    background-color: rgb(244, 244, 244) ;
    width: 290px;
    height: 150px;
}
.biaoge tr td a{
    text-decoration: none;
    font-size: 14px;
}
.biaoge tr td a:link{
    color: black;
}
.biaoge tr td a:hover{
    color: black;
}
.biaoge tr td a:visited{
    color: black;
}
.ckqb td{
    background-color: rgb(232, 232, 232);
    border-right: 1px solid gray;
}
.ckqb a{
    float: right;
}
.ge1 td div{
    margin-left: 20px;
}
.ge2 td div{
    margin-left: 20px;
}
.ge2{
    background-color: rgb(232, 232, 232);
}
.ge1{
    background-color: rgb(244, 244, 244) ;
}
.bd1 img{
    width: 15px;
    height: 15px;
}
.bfsc img{
    width: 30px;
    height: 30px;
}
.biaoshengbang img{
    width: 80px;
    height: 80px;
}
.qq{
    height: 500px;
}
.wqqw img{
    width: 20px;
    height: 20px; 
}
.xiedie img{
     width: 80px;
    height: 80px;
}
.xcz img{
    width: 800px;
    height: 330px;
    margin-top: 30px;
    margin-left: 300px;
}
    </style>
</head>
<body>
    <div class="A">
        <h1>
        <a href="">
            <img src="./png/logo.png" width="2%" alt="">
        </a>
        </h1>
        <nav class="er">
            <a href="">发现音乐</a>
            <a href="./cyx2.html">我的音乐</a>
            <a href="">关注</a>
            <a href="">商城</a>
            <a href="">音乐人</a>
            <a href="">云推歌</a>
            <a href="">下载客户端</a>
        </nav>
        <div class="sousuolan">
            <span>
                <input type="search" value="音乐/视频/电台/用户">
                <input type="search" value="音乐/视频/电台/用户">
            </span>
        </div>
        <div class="u">
            <a data-action="bilog" data-log-action="click" data-log-json="{&quot;target&quot;:&quot;uploadvideo&quot;,&quot;page&quot;:&quot;homepage&quot;}" href="/creatorcenter" target="_blank" class="m-topvd f-pr m-creator-center">创作者中心</a>
        </div>
        <div class="y">
            <a hidefocus="true" href="#" class="link s-fc3" data-action="login">登录</a>
        </div>
    </div>
    <div class="B">
        <span class="j">
            <a href="">推荐</a>
            <a href="">排行榜</a>
            <a href="">歌单</a>
            <a href="">博客有声书</a>
            <a href="">歌手</a>
            <a href="">新碟上架</a>
        </span>
    </div>
    <div class="C">
        <a href="">
            <img class="ttt" src="./png/tupian.png" alt="">
            <img class="qqq" src="./png/下载.png" alt="">
        </a>
    </div>
    <div class="kd">
        <table>
            <table>
                <tr>
                    <td><img class="rrrr" src="./png/xiao1.png" width="20px;" alt=""></td>
                    <td style="font-size: 20px;"><a href=""><b>热门推荐</b></a>
                    </td>
                    </a>
                    <td><a href="https://music.163.com/#/discover/playlist/?cat=%E5%8D%8E%E8%AF%AD">华语</a></td>
                    <td>|</td>
                    <td><a href="https://music.163.com/#/discover/playlist/?cat=%E6%B5%81%E8%A1%8C">流行</a></td>
                    <td>|</td>
                    <td><a href="https://music.163.com/#/discover/playlist/?cat=%E6%91%87%E6%BB%9A">摇滚</a></td>
                    <td>|</td>
                    <td><a href="https://music.163.com/#/discover/playlist/?cat=%E6%B0%91%E8%B0%A3">民谣</a></td>
                    <td>|</td>
                    <td><a href="https://music.163.com/#/discover/playlist/?cat=%E7%94%B5%E5%AD%90">电子</a></td>
                    <td><a href="https://music.163.com/#/discover/playlist/">更多</a></td>
                    <td><img src="../xiao2.png" width="20px" alt=""></td>
                </tr>
            </table>
            
            <table class="wdad">
                <tr>
                    <a href="../网页跳转.html">
                    <td><img src="./png/d1.jpg"  alt=""></td>
                    <td><img src="./png/d2.jpg"  alt=""></td>
                    <td><img src="./png/d3.jpg"  alt=""></td>
                    <td><img src="./png/d5.jpg"  alt=""></td>
                    </a>
                </tr>
                <tr >
                    <td style=>开启心动模式，耳机里的糖分你一半</td>
                    <td style=>喧嚣中找寻宁静的片刻</td>
                    <td style=>在璀璨星河下微醺 喝杯小酒吧！</td>
                    <td style=>【B.G.M.】游戏必备战歌</td>
                </tr>
                <tr>
                    <td><img src="./png/d1.jpg"  alt=""></td>
                    <td><img src="./png/d2.jpg"  alt=""></td>
                    <td><img src="./png/d3.jpg"  alt=""></td>
                    <td><img src="./png/d5.jpg"  alt=""></td>
                </tr>
                <tr >
                    <td >【电子】入耳收藏的经典旋律</td>
                    <td >风里有诗，那正是民谣的歌</td>
                    <td >不让你通宵循环的电音不是好电音</td>
                    <td >戳爷/断眉/萌德/比伯/烟卷</td>
                </tr>
            </table>
        </table>
    </div>
        <div class="xcz">
            <img src="./png/55555.png" alt="">
        </div>
     <div class="wyy">
        <div class="bd">
            <div class="bd1">
            <img src="./png/l1.jpg"  alt="">
            <a href="">榜单</a>
            </div>
            <div class="bd2">
                <a href="">更多</a>
                <div class="jiantou">➡</div>
            </div>
        </div>
        <hr class="xian">
        <table class="biaoge" border="1" width="650px" height="500px" rules="cols">
            <tr class="biaotou1">
                <td>           
                    <p class="biaoshengbang">
                    <a href=""><img src="./png/l2.png" width="80px" alt=""></a>
                    <div class="bsb2">
                    <a href=""><b>飙升榜</b></a>
                    <div class="bfsc">
                    <a href=""><img src="./png/l3.png" width="20" alt=""></a>
                    <a href=""><img src="./png/l4.png" width="20" alt=""></a>
                    </div>
                    </p>
                    
                </td>
                <td>
                    <p class="biaoshengbang">
                        <a href=""><img src="./png/l5.png" width="80px" alt=""></a>
                        <div class="bsb2">
                        <a href=""><b>新歌榜</b></a>
                        <div class="bfsc">
                        <a href=""><img src="./png/l3.png" width="20" alt=""></a>
                        <a href=""><img src="./png/l4.png" width="20" alt=""></a>
                        </div>
                        </p>
                </td>
                <td>
                    <p class="biaoshengbang">
                        <a href=""><img src="./png/l6.jpg" width="80px" alt=""></a>
                        <div class="bsb2">
                        <a href=""><b>原创榜</b></a>
                        <div class="bfsc">
                        <a href=""><img src="./png/l3.png" width="20" alt=""></a>
                        <a href=""><img src="./png/l4.png" width="20" alt=""></a>
                        </div>
                    </p>
                </td>
            </tr>
            <tr class="ge1">
                <td>
                    <div>
                    <span style="color: red;">1</span>
                    <a href="">别叫我达芬奇</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span style="color: red;">1</span>
                        <a href="">四点的海棠花未眠</a>
                        </div>
                </td>
                <td>
                    <div>
                        <span style="color: red;">1</span>
                        <a href="">日暮里</a>
                        </div>
                </td>
            </tr>
            <tr class="ge2">
                <td> 
                <div>
                    <span style="color: red;">2</span>
                    <a href="">风铃</a>
                </div>
                </td>
                <td>
                    <div>
                    <span style="color: red;">2</span>
                    <a href="">风铃</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span style="color: red;">2</span>
                        <a href="">将军</a>
                    </div>
                </td>
            </tr>
            <tr class="ge1">
                <td>
                    <div>
                        <span style="color: red;">3</span>
                        <a href="">1234</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span style="color: red;">3</span>
                        <a href="">刀背</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span style="color: red;">3</span>
                        <a href="">KIPINEK</a>
                    </div>
                </td>
            </tr>
            <tr class="ge2">
                <td>
                    <div>
                        <span>4</span>
                        <a href="">刀背</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>4</span>
                        <a href="">got lt(phonk)</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>4</span>
                        <a href="">不放晴的雨季</a>
                    </div>
                </td>
            </tr>
            <tr class="ge1">
                <td>
                    <div>
                        <span>5</span>
                        <a href="">我能理解你手腕上的那些疤</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>5</span>
                        <a href="">弄舌</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>5</span>
                        <a href="">20 Minutes Freestyle</a>
                    </div>
                </td>
            </tr>
            <tr class="ge2">
                <td>
                    <div>
                        <span>6</span>
                        <a href="">心跳</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>6</span>
                        <a href="">got lt(phonk)</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>6</span>
                        <a href="">Sky Is The Limit</a>
                    </div>
                </td>
            </tr>
            <tr class="ge1">
                <td>
                    <div>
                        <span>7</span>
                        <a href="">Passion</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>7</span>
                        <a href="">我的爱没前奏</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>7</span>
                        <a href="">苦杏仁</a>
                    </div>
                </td>
            </tr>
            <tr class="ge2">
                <td>
                    <div>
                        <span>8</span>
                        <a href="">鱼仔</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>8</span>
                        <a href="">1234</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>8</span>
                        <a href="">祝酒辞</a>
                    </div>
                </td>
            </tr>
            <tr class="ge1">
                <td>
                    <div>
                        <span>9</span>
                        <a href="">会开花的云</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>9</span>
                        <a href="">你没说的话</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>9</span>
                        <a href="">教我怎么忘</a>
                    </div>
                </td>
            </tr>
            <tr class="ge2">
                <td>
                    <div>
                        <span>10</span>
                        <a href="">Roxy</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>10</span>
                        <a href="">20 Minutes Freestyle</a>
                    </div>
                </td>
                <td>
                    <div>
                        <span>10</span>
                        <a href="">Little Ray Of Light</a>
                    </div>
                </td>
            </tr>
            <tr class="ckqb">
                <td>
                    <a href="">查看全部></a>
                </td>
                <td>
                    <a href="">查看全部></a>
                </td>
                <td>
                    <a href="">查看全部></a>
                </td>   
            </tr>
        </table>
    </div>
</body>
</html>